<template>




	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state"
				:class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" style="height: 100%" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0" />
					<!-- 订单列表 -->
					<!-- <view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock"> -->
					<view class="orderInfo" v-if="tag.orderList.length!=0">
						<view class="orderItem" v-for="(item , index) in tag.orderList" :key="item.id">
							<view class="orderDate">
								<view>订单日期：{{item.createtime_text}}</view>
								<view class="color-FF4400">{{item.state==2?'待核销':'已核销'}}</view>
							</view>
							<view class="shopInfo" v-for="(childItem,childIndex) in item.goods" :key="childIndex">
								<image :src="$wanlshop.oss(childItem.image)" mode="widthFix" class="shopImg"></image>
								<view class="shopDesc">
									<view class="shopName">{{childItem.title}}</view>
									<view class="color-A1A1A1">商品数量：{{childItem.number}}</view>
									<view class="color-A1A1A1">规格：{{childItem.difference}}</view>
									<view class="color-A1A1A1">商品金额：<text
											class="text-decoration">￥{{childItem.price}}</text> </view>
									<view class="color-A1A1A1">积分数量：<text
											class="color-FF4400">{{childItem.price}}</text> </view>
								</view>
								<!-- 核销码 -->
								<view class="changecode" @tap="getQRCode(item.order_no)" v-if="item.state==2">
									<view class="">
										<text class="wlIcon-saoyisao"></text>
									</view>
									<view class="changecode-text">出示核销码</view>
								</view>
							</view>
							<view class="shopBtn">
								<view class="phoneBtn" v-if="item.shop.shopkeeper&&item.shop.phone"
									@tap="markPhone(item.shop.phone)">
									<image src="../../static/images/shop/m7.png" mode=""></image>
									{{item.shop.shopkeeper}}
								</view>
								<view class="detailsBtn" @click="toDetails(item.id)">查看详情</view>
							</view>
						</view>
					</view>




					<uni-load-more :status="tag.loadingType" :content-text="contentText"
						v-if="tag.orderList.length!=0" />
					<view class="edgeInsetBottom"></view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="PayWin" border-radius="50" mode="center">
			<view class="show-popup-box">
				<view class="popup-contenr">
					<view class="popup-top">
						<image src="#" mode="widthFix"></image>
					</view>
					<view class="popup-code">
						<uni-qrcode v-if="uQRText&&PayWin" ref="qrcode" cid="qrcode" :text='uQRText' :size="uQRSize">
						</uni-qrcode>
					</view>
					<view class="popup-text">
						到店出示二维码，由店家核销操作
					</view>
					<view class="popup-btn">
						<!-- <button type="default">保存图片</button> -->
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uQRCode from '../../components/uni-qrcode/uni-qrcode.vue'
	export default {
		data() {
			return {
				uQRText: "",
				uQRSize: uni.upx2px(270),
				PayWin: false,
				tabCurrentIndex: 0,
				navList: [{
						state: this.isShopManager ? 'all' : 0,
						text: '全部',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},
					{
						state: this.isShopManager ? 0 : 2,
						text: '未核销',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					},
					{
						state: this.isShopManager ? 1 : 6,
						text: '已核销',
						loadingType: 'more',
						current_page: 1,
						orderList: []
					}
				],
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载...',
					contentnomore: '我是有底线的!'
				}
			};
		},
		components: {
			'uni-qrcode': uQRCode
		},
		onLoad(options) {
			console.log(7888, options)
			if (!options.state) {
				this.isShopManager = true
				this.tabCurrentIndex = options.tab;
				this.loadData()
				if (options.tab == "all") {
					this.loadData()
				}
			} else {
				this.tabCurrentIndex = +options.state;
				// #ifndef MP
				this.loadData();
				// #endif
				// #ifdef MP
				if (options.state == 0) {
					this.loadData();
				}
				// #endif
			}

		},
		methods: {
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				//判断是否最后一页
				if (navItem.loadingType == 'noMore') {
					return;
				}
				//tab切换只有第一次需要加载数据
				if (source === 'tabChange' && navItem.loaded === true) {
					return;
				}
				//防止重复加载
				if (navItem.loadingType === 'loading') {
					return;
				}
				navItem.loadingType = 'loading';
				// 获取列表
				if (this.isShopManager) {
					this.$api.post({
						url: '/wanlshop.shop/getOrderList',
						data: {
							state,
							page: navItem.current_page,
						},
						success: res => {
							navItem.current_page = res.current_page; //当前页码
							if (res.last_page === res.current_page) {
								navItem.loadingType = 'noMore';
							} else {
								navItem.loadingType = 'more';
								navItem.current_page++;
							}
							res.data.forEach(item => {
								navItem.orderList.push(item);
							});
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							this.$set(navItem, 'loaded', true);
							console.log(this.navList[index])
						}
					})
				} else {
					this.$api.get({
						url: '/wanlshop/order/getOrderList',
						data: {
							state: state,
							page: navItem.current_page
						},
						success: res => {
							navItem.current_page = res.current_page; //当前页码
							if (res.last_page === res.current_page) {
								navItem.loadingType = 'noMore';
							} else {
								navItem.loadingType = 'more';
								navItem.current_page++;
							}
							res.data.forEach(item => {
								navItem.orderList.push(item);
							});
							//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
							this.$set(navItem, 'loaded', true);
							console.log(this.navList[index])
						}
					});
				}

			},

			// 生成二维码
			getQRCode(value) {
				this.uQRText = value;
				console.log(this.uQRText)
				this.PayWin = true;
			},
			//拨打电话
			markPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},

			toDetails(id) {
				uni.navigateTo({
					url: '/pages/shop/orderDetails?id=' + id
				})
			}

		}
	};
</script>
<style>
	page {
		height: 100%;
	}

	.uni-load-more::v-deep {
		background: #EEEEEE;
	}

	.wanl-order-list .u-mode-center-box::v-deep {
		background: #ffffff00 !important;
	}
</style>
<style lang="scss" scoped>
	.show-popup-box {
		width: 502rpx;
		height: 596rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.popup-contenr {
			width: 100%;
			height: 530rpx;
			position: absolute;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			border-radius: 100rpx;

			.popup-top {
				width: 132rpx;
				height: 132rpx;
				margin-top: -66rpx;
				border: 50%;
				background: #EEEEEE;
				border-radius: 50%;
				overflow: hidden;
			}

			.popup-code {
				width: 272rpx;
				height: 272rpx;
			}

			.popup-btn {
				padding: 20rpx 0;
			}
		}
	}

	.wanl-order-list::v-deep {
		display: flex;
		flex-direction: column;
		background: #EEEEEE;

		.navbar {
			height: 88rpx;
			background: #FFFFFF;
		}

		.color-A1A1A1 {
			color: #a1a1a1;
		}

		.u-scroll-box {
			display: flex;
			justify-content: space-between;

			.u-tab-item {
				width: 33.33%;
				font-weight: bold;
			}
		}

		.orderInfo {
			flex: 1;
			padding: 29rpx 32rpx;
			background: #EEEEEE;

			.orderItem {
				padding: 17rpx 27rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-bottom: 30rpx;

				.orderDate {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #3F3F3F;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 27rpx;

					.color-FF4400 {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FF4400;
					}
				}

				.shopInfo {
					display: flex;
					justify-content: flex-start;
					padding: 29rpx 0;
					border-bottom: 1px solid #EEEEEE;

					.shopImg {
						width: 86rpx;
						height: 130rpx;
					}

					.shopDesc {
						margin-left: 37rpx;

						&>view {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
						}

						.shopName {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #3F3F3F;
						}

						.text-decoration {
							text-decoration: line-through;
						}

						.color-FF4400 {
							color: #FF4400;
						}
					}

					.changecode {
						margin-left: auto;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						text {
							font-size: 64rpx;
							background: #fada46;
							padding: 8rpx;
							border-radius: 50%;
							color: #ffffff;
							border: 4rpx solid #EEEEEE;
						}

						.changecode-text {
							margin-top: 20rpx;
							color: #a3a3a3;
						}
					}
				}

				.shopBtn {
					display: flex;
					justify-content: space-between;
					padding: 20rpx 0;

					.phoneBtn {
						min-width: 134rpx;
						height: 56rpx;
						border: 2rpx solid #FF4400;
						border-radius: 28rpx;
						color: #FF4400;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 27rpx;
							height: 27rpx;
							margin-right: 8rpx;
						}
					}

					.detailsBtn {
						width: 154rpx;
						height: 56rpx;
						border: 2rpx solid #A1A1A1;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 28rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #3F3F3F;
						margin-left: auto;
					}
				}
			}
		}
	}
</style>
